<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.css" />
    <link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" href="css/register.css" />
    <link href="./css/ht.css" rel="stylesheet" />
    <style>
      .formGroup{
        padding: 10px 15px;
        position: relative;
        background-color: #fff;
      }
      .formGroup .label{
        padding-right: 10px;
        width: 25%;
        text-align: right;
      }
      .formGroup:after {
          position: absolute;
          right: 0px;
          bottom: 0;
          left: 0px;
          height: 1px;
          content: '';
          -webkit-transform: scaleY(.5);
          transform: scaleY(.5);
          background-color: #c8c7cc;
      }
      .img-up {
      	width: 6.5rem;
      	/*height: 100px;*/
      	margin-top: 10px;
      	margin-right: 10px;
      	overflow: hidden;
        text-align: center;
      }
      
      .img-up .img {
      	width: 4rem;
      	height: 3.9rem;
        vertical-align: middle;
        text-align: center;
		background: url(../../img/u6916.png) no-repeat;
		background-size:100% 100%;
      }
      .mui-checkbox label,
      .mui-radio label {
      	padding-right: 8px;
      	padding-left: 28px;
      	font-size: 0.9rem;
      	color: #666;
      }
      
      .mui-checkbox input[type=checkbox],
      .mui-radio input[type=radio] {
      	position: absolute;
      	top: -4px;
      	right: 40px;
      	display: inline-block;
      	width: 28px;
      	height: 26px;
      	border: 0;
      	outline: 0!important;
      	background-color: transparent;
      	-webkit-appearance: none;
      }
      .checkBox .mui-input-row label{
          padding: 0px 15px;
          padding-left: 38px;
      }
	  .mui-pull-left input[type=checkbox]{ transform: scale(.8);}
      .checkBox .mui-input-row{
          margin-bottom: 10px;
          margin-right: 6px;
      }
      .photo{
        position: relative;
        width: 6.5rem;
        height: 6.5rem;
        vertical-align: middle;
      }
      .photo img{
        width: 6.5rem;
        height: 100%;
        vertical-align: middle;
      }
      .photo .delete{
        position: absolute;
        background-color: rgba(0,0,0,.5);
        color:#fff;
        display: inline-block;
        z-index: 999;
        top:0;
		right: 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">外来人员注册</h1>
    </header>
    <div class="mui-content" id="registerpage" style="padding-bottom: 40px;">
      <div class="formGroup flex">
        <div class="label">身份证照片：</div>
        <div class="flex-sub">
          <p><span class="text-red">*</span>请上传清晰的本人身份证正反面照片</p>
          <div class="flex">
            <div class="img-up" v-for="(item,index) in formData.idCard">
              <div class="photo">
                <img width="100%" :src="item.relativeUrl" alt="" class="headimg" />
                <span class="mui-icon mui-icon-closeempty delete" @click="deletePhone($event,index,'idCard')"></span>
              </div>
            </div>

            <div class="img-up" @click="choosePhoto($event,'idCard')" v-if="formData.idCard.length<2">
              <div class="img">
                
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="formGroup flex">
        <div class="label">体检报告：</div>
        <div class="flex-sub">
          <p><span class="text-red">*</span>请上传近三个月清晰的本人体检报告</p>
          <div class="flex">

            <div class="img-up" v-for="(item,index) in formData.examination">
              <div class="photo">
                <img width="100%" :src="item.relativeUrl" alt="" class="headimg" />
                <span class="mui-icon mui-icon-closeempty delete" @click="deletePhone($event,index,'examination')"></span>
              </div>
            </div>

            <div class="img-up" @click="choosePhoto($event,'examination')" v-if="formData.examination.length===0">
              <div class="img">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--
=======
	  <!--
>>>>>>> 1a00545b0032bf694c0e431bbf65ad8bcbf54bc2
      <div class="formGroup flex">
        <div class="label">工作人员授权书：</div>
        <div class="flex-sub">
          <p><span class="text-red">*</span>如需承担工作负责人请上传授权书</p>
          
            <div class="ridioGroup cf" style="display: block;width: 100%;">
            	<form action="">
            		<div class="mui-radio mui-pull-left">
            			<label>正常</label>
            			<input name="radio1" type="radio" value="正常"></div>
            		<div class="mui-radio mui-pull-left">
            			<label>异常</label>
            			<input name="radio1" type="radio" value="异常"></div>
            	</form>
            </div>
			<div class="img-up" v-for="(item,index) in formData.authorization" @click="deletePhone($event,index,'authorization')">
				<div class="photo">
					<img width="100%" height="auto" :src="item.relativeUrl" alt="" class="headimg" />
					<span class="mui-icon mui-icon-closeempty delete"></span>
				</div>				
			</div>
            <div class="img-up" @click="choosePhoto($event,'authorization')">
            	<div class="img">
            		
						
            	</div>
            </div>
          
        </div>
      </div>
	  -->
      <div class="formGroup flex">
        <div class="label">作业工种：</div>
		<div class="flex-sub"><div class="flex">
        <div class="cf checkBox">
          <div class="mui-checkbox mui-pull-left margin-bottom-xs" v-for="item in jobsClass">
            <input name="checkbox" :value="item.id" v-model="formData.tbJobClasses" type="checkbox">
            <label>{{item.jobClass}}</label>
          </div>
        </div></div></div>
      </div>
      <div class="formGroup flex">
        <div class="label">特种作业证正反面：</div>
        <div class="flex-sub">
          <p><span class="text-red">*</span>请上传本人特种作业证正反面</p>
          <div class="flex">
            <div class="img-up" v-for="(item,index) in formData.special">
              <div class="photo">
                <img width="100%" height="auto" :src="item.relativeUrl" alt="" class="headimg" />
                <span class="mui-icon mui-icon-closeempty delete" @click="deletePhone($event,index,'special')"></span>
              </div>
            </div>

            <div class="img-up" @click="choosePhoto($event,'special')" v-if="formData.special.length<2">
              <div class="img">
                
				
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="formGroup flex">
        <div class="label">本人驾照：</div>
        <div class="flex-sub">
          <p><span class="text-red">*</span>请上传符合本人作业车辆的驾照照片 ，5年以上驾龄</p>
          <div class="flex">
            <div class="img-up" v-for="(item,index) in formData.drivinglicense">
              <div class="photo">
                <img width="100%" height="auto" :src="item.relativeUrl" alt="" class="headimg" />
                <span class="mui-icon mui-icon-closeempty delete" @click="deletePhone($event,index,'drivinglicense')"></span>
              </div>
            </div>

            <div class="img-up" @click="choosePhoto($event,'drivinglicense')" v-if="formData.drivinglicense.length===0">
              <div class="img">
                
				
              </div>
            </div>
          </div>
        </div>
      </div>
	  <div class="formGroup flex" style="background:rgba(254, 252, 236, 1)">	
        <div style="width:100%;text-align: center;padding:10px 0;">
          *请认真填写以上信息，确保关联组织生效
        </div>
	  </div>
      <div class="formGroup flex">
        <div class="padding">
          <input name="checkbox1" v-model="formData.agree" type="checkbox" style="background-color: #fff;">
          <label style="width: 80%;">我已阅读并同意</label><span style="color: #0077DC;" @click="notice()">《外来人员注册须知条款》</span><span style="color: #0077DC;" @click="privacy()">《xx隐私政策条款》</span>
        </div>
      </div>

      <span class="register" @click="save()">确定</span>
      <div style="clear: both;float:none"></div>

    </div>

  </body>
  <script src="../../js/mui.min.js"></script>
  <script src="../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../js/jquery-3.2.1.min.js"></script>
  <script src="../../js/mkeyplus.base.js"></script>
  <script src="../../js/common.js"></script>
  <script src="../neom/js/mkeyplus.base.js"></script>
  <script type="text/javascript" src="../../js/vue.js"></script>
  <script src="../../js/uuid.js"></script>
  <script src="./js/up.js"></script>
  <script type="text/javascript">
    var registerWNPage = null,
      cv = null;
    var API_URL_PREFIX = '';
    mui.init();
    mui.plusReady(function() {
      cv = plus.webview.currentWebview();console.log(cv.form);
      registerWNPage.postData = cv.form?JSON.parse(cv.form):{};
      registerWNPage.getJobs();
	  console.log(JSON.stringify(registerWNPage.postData));
    })
    registerWNPage = new Vue({
      el: '#registerpage',
      data: {
        tabIndex: 1,
        user: '',
        password: '',
        postData: {},
        formData: {
          idCard: [], //身份证图片列表
          examination: [], //体检报告
          //authorization:[],//授权书
          special: [], //特种证件
          tbJobClasses: [], //工作类型
          drivinglicense: [], //驾驶证
          agree: false //是否同意
        },
        jobsClass: [] //作业类别
      },
      created: function() {
        
      },
      methods: {
        notice(){
          mui.openWindow({
            url: '../neom/home/notice.html',
            id: '../neom/home/notice.html',
            extras: {
            }
          })
        },
        privacy(){
          mui.openWindow({
            url: './Privacy.html',
            id: './Privacye.html',
            extras: {
            }
          })
        },
        next() {
          mui.openWindow({
            url: '../neom/home.html',
            id: '../neom/home.html',
            extras: {
              network: 0
            }
          });
        },
        choosePhoto(e, listkey) {
          var _this = this;
          page.setConf({
            server: mui.baseWApp.serverUrl + '/general/upload',
            //server:'http://localhost/upload.php',
            postkey: 'fileData',
            callback: function(res) {
              if (res.data) {
                var data = res.data;
                data.relativeUrl = mui.baseWApp.serverUrl + data.relativeUrl;
                //添加到数组
                _this.formData[listkey].push(data);console.log(JSON.stringify(_this.formData));
              }
            }
          });
          page.imgUp();
        },
        deletePhone(e, i, listkey) {
          this.formData[listkey].splice(i, 1);
        },
        getJobs() {
          console.log(mui.baseWApp.serverUrl,1111)
          //获取工种
          var _this = this;
          mui.baseWApp.httpRequst('/general/jobsClass', {}, function(data) {
            if (data.code == '0') {
              console.log('工种' + JSON.stringify(data))
              if (data.data) {
                _this.jobsClass = data.data;
                //console.log(_this.jobsClass);
              }
            }
          });

        },
        verificationForm() {
          //验证提交
          var _this = this;

          var formData = this.formData,
            bAppUserFileDTOS = [],
            tbJobClasses = [];

          formData.tbJobClasses.map(function(item) {
            var a = _this.jobsClass.filter(function(itemc) {
              return itemc.id == item;
            });
            if (a[0])
              tbJobClasses.push(a[0]);
          });
          _this.postData.tbJobClasses = tbJobClasses;
          
          if(formData.idCard.length<2){
          	mui.toast('请上传身份证正反面照片！');
          	return false;
          }
		  if(formData.examination.length<1){
		  	mui.toast('请上传体检报告！');return false;
		  }
		  if(formData.special.length<1){
		  	mui.toast('请上传作业证！');return false;
		  }
		  if(formData.drivinglicense.length<1){
		  	mui.toast('请上传驾驶证！');return false;
		  }
		  if(!formData.agree){
		  	mui.toast('请选择同意注册条款！'); return false;
		  }
          this.cleFi(bAppUserFileDTOS,formData.idCard,3);
          
          this.cleFi(bAppUserFileDTOS,formData.examination,4);
          
          this.cleFi(bAppUserFileDTOS,formData.special,5);
          
          this.cleFi(bAppUserFileDTOS,formData.drivinglicense,6);
          
          this.postData.tbAppUserFileDTOS=bAppUserFileDTOS;
          return true;
        },
        cleFi(arr1, arr2, type) {
          //清洗数据
          arr2.map(function(item) {
            item['type'] = type;
            delete item['relativeUrl'];
            delete item['fileSize'];
            arr1.push(item);
            return item;
          });
          return arr1;
        },
        save() {
          //提交
          var rs = this.verificationForm();
          if (rs) {
            plus.nativeUI.showWaiting('注册中...');
            console.log(JSON.stringify(this.postData));
            this.postData.sex = parseInt(this.postData.sex);
            // this.postData.tbAppUserFileDTOS = [];
            mui.baseWApp.httpRequst('/appUser/register', this.postData,
              function(data) {
                //提交注册数据等待接口返回
                if(data.code=='0'){
                  plus.nativeUI.closeWaiting();
                 mui.openWindow({
                   url: './login.html',
                   id: 'login.html',
                 });
                }else{
                  mui.toast(data.msg)
                }
              },
              function() {
                plus.nativeUI.closeWaiting();
                console.log("注册失败");
              }, 'post');
          }
        }

      }
    })
  </script>
</html>
